import React from 'react';
import axios from 'axios';
import Handline from './headline';
const newUrl = 'http://newsapi.org/v2/top-headlines?country=us&apiKey=209cd02e74314a32a4e5f1d5b9cbdff1';
// let timer = null;

interface Props {
  dataList?: any[];
  newUrl?: string;
  status?: any;
};

interface State {
  dataList: any[];
  status: any;
};
export default class Static extends React.Component<Props, State> {
  mounted: boolean;
  time: any;

  constructor(props) {
    super(props)

    this.state = {
      dataList: this.props.dataList || [],
      status: this.props.status || true,
    };

  }

  public initPropsData() {
    return axios.get(newUrl)
      .then((response) => {
        if (response.statusText === 'OK') {
          return response.data;
        }
      });
  }

  componentDidMount() {
    // this.initPropsData().then((req) => {
    //   if (req.status === 'ok') {
    //     this.setState({
    //       dataList: req.articles,
    //       status: true
    //     }, () => {
    //       console.log("setStateCallBack", this.state);
    //       return;
    //     });
    //   }
    //   // console.log("ssssssssssssssssss======",req )
    // })

    axios.get(newUrl)
      .then((response) => {
        console.log("ctx========",response)
        if (response.statusText === 'OK') {
          
          this.setState({
            dataList: response.data.articles,
            status: true
          }, () => {
            console.log("setStateCallBack", this.state);
            
          });

          return response;
        }
      });
  }
  // componentWillUnmount() {
  //   // clearTimeout(this.time);
  //   console.log('componentWillUnmount')
  // }
  render() {
    
    let { dataList, status } = this.state;
    return (
      <div>
        <h1>新闻列表</h1>
        <div>
          {status ? dataList.map((item, key) => {
            return <Handline key={key} {...item} />
          }) : <div>loading...</div>}

        </div>

      </div>
    );
  }
}